<template>
    <div class="my-div" style="width: 100%;">
        <div class="text">
            <div class="div-1">
                <span>牛排</span>
                <span>￥50.00</span>
            </div>
            <div class="div-2">
                <span>沙拉</span>
                <span>￥50.00</span>
            </div>
            <div class="div-3">
                <span>披萨</span>
                <span>￥50.00</span>
            </div>
            <img style="width: 100%;height: 665px"
                 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.meituan.net%2Fdeal%2F2b3f6c2419fbe5ce9928fcc0937e8ae5459556.jpg&refer=http%3A%2F%2Fp0.meituan.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672907742&t=2e6d3783e630a572e6bb25e406f86a43">
        </div>

    </div>
</template>

<script>
    export default {
        name: "OrderBack"
    }
</script>

<style scoped>
    body {
        margin: 0;
        padding: 0;
    }

    .my-div {
        position: relative;
        width: 100%;
        height: 595px;

    }

    .top p {
        font-weight: bold;
        float: left;
        margin-left: 20px;
    }

    .div-1 {
        background-color: rgba(25, 26, 27, 0.4);
        position: absolute;
        border: 3px solid rgb(7, 100, 186);
        border-top: none;
        left: 205px;
        display: inline-block;
        width: 210px;
        height: 160px;
        bottom: 50px;
    }


    .div-2 {
        background-color: rgba(25, 26, 27, 0.4);
        position: absolute;
        border: 3px solid rgb(7, 100, 186);
        display: inline-block;
        width: 300px;
        height: 180px;
        right: 215px;
        top: 80px;
        border-top: none;
    }

    .div-3 {
        background-color: rgba(25, 26, 27, 0.4);
        position: absolute;
        border: 3px solid rgb(7, 100, 186);
        display: inline-block;
        width: 335px;
        height: 250px;
        right: 25px;
        bottom: 25px;
        border-top: none;
    }

    .text .div-1 > span {
        margin-top: 130px;
        display: inline-block;
        color: white;
        font-size: 20px;
    }

    .text .div-2 > span {
        margin-top: 125px;
        display: inline-block;
        color: white;
        font-size: 20px;
    }

    .text .div-3 > span {
        margin-top: 170px;
        display: inline-block;
        color: white;
        font-size: 20px;
    }
</style>